<template>
  <!--IC信息维护界面-->
  <el-dialog title="IC信息维护" width="50%" :visible.sync="box" :close-on-click-modal="false">
    <avue-crud :option="guardOption" ref="crud" v-model="guardForm" :page="guardPage" :data="guardData" :table-loading="guardLoading" :before-open="beforeOpen" :before-close="beforeClose" @refresh-change="refreshChange" @current-change="currentChange" @row-del="rowDel" @row-save="rowSave">
      <template slot-scope="scope" slot="icIdForm">
        <avue-crud-input v-model="guardForm.icId" :disabled="scope.column.disabled" :placeholder="scope.column.placeholder"></avue-crud-input>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button @click="syncIC(scope.$index, scope.row)" size="small" type="primary" plain>同步</el-button>
        <el-button @click="$refs.crud.rowDel(scope.row,scope.$index )" size="small" type="danger" plain>删除</el-button>
      </template>
      <template slot-scope="scope" slot="status">
        <el-tag v-if="Number(scope.row.status)===0" type="warning">{{scope.label}}</el-tag>
        <el-tag v-else-if="Number(scope.row.status)===1" type="success">{{scope.label}}</el-tag>
        <el-tag v-else-if="Number(scope.row.status)===2" type="danger">{{scope.label}}</el-tag>
        <el-tag v-else-if="Number(scope.row.status)===3" type="warning">{{scope.label}}</el-tag>
      </template>
    </avue-crud>
  </el-dialog>
</template>

<script>
import {
  fetchIcList,
  addIcObjByUserId,
  putIcObj,
  delIcObj,
  updateIcObj
} from '@/api/guard/'
export default {
  name: 'guard',
  data() {
    return {
      box: false,
      code: 0,
      guardData: [],
      guardId: '',
      guardForm: {},
      guardLoading: false,
      guardPage: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      rfidreader: undefined,
      guardOption: {
        dicUrl: '/admin/dict/type/{{key}}',
        index: true,
        border: true,
        stripe: true,
        height: 300,
        editBtn: false,
        delBtn: false,
        indexLabel: '序号',
        formWidth: '30%',
        menuAlign: 'center',
        column: [
          {
            label: 'IC信息',
            sortable: true,
            size: 'small',
            span: 24,
            prop: 'icId',
            disabled: true,
            formsolt: true,
            placeholder: '请刷卡IC的卡号',
            rules: [
              {
                required: true,
                message: '请输入IC信息',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '设备名称',
            sortable: true,
            size: 'small',
            span: 24,
            addVisdiplay: false,
            editVisdiplay: false,
            prop: 'deviceName'
          },
          {
            label: '状态',
            sortable: true,
            size: 'small',
            type: 'select',
            addVisdiplay: false,
            editVisdiplay: false,
            prop: 'status',
            solt: true,
            dicData: 'ic_device'
          }
        ]
      }
    }
  },
  methods: {
    // 显示IC信息维护界面
    handleAddIC: function(row) {
      this.guardId = row.userId
      this.getIcList()
      this.box = true
    },

    beforeOpen(show) {
      this.initCardId()
      show()
    },
    rowSave(row, done) {
      addIcObjByUserId(
        Object.assign({}, row, {
          userId: this.guardId
        })
      ).then(data => {
        this.$message({
          showClose: true,
          message: data.data.msg,
          type: 'success'
        })
        this.getIcList()
        var FormatID = '0'
        var OrderID = '0'
        this.rfidreader.Repeat = 0
        //this.rfidreader.RequestTypeACardNo(FormatID, OrderID)
        done()
      })
    },

    rowDel(row, index) {
      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          return delIcObj(row.id)
        })
        .then(data => {
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success'
          })
          this.getIcList()
        })
        .catch(function(err) {})
    },
    syncIC(index, row) {
      updateIcObj(row).then(data => {
        this.$message({
          showClose: true,
          message: '同步中',
          type: 'success'
        })
        this.getIcList()
      })
    },
    initCardId() {
      try {
        this.rfidreader = window.YOWORFIDReader.createNew()
      } catch (e) {
        this.$message.error('创建友我科技RFID云服务连接失败，请先下载安装！')
        top.location =
          'http://www.youwokeji.com.cn/CloudReader/YOWORFIDReaderCloudForWeb.exe'
      }
      if (!this.rfidreader.TryConnect()) {
        this.$message.error('浏览器不支持')
      }
      var FormatID = '0'
      var OrderID = '0'
      this.rfidreader.Repeat = 0
      this.rfidreader.HaltAfterSuccess = 1
      this.rfidreader.M1WriteBlock(4, this.code, FormatID)
      // this.rfidreader.RequestTypeACardNo(FormatID, OrderID)
      this.rfidreader.onResult(resultdata => {
        switch (resultdata.FunctionID) {
          case 6:
            if (resultdata.Result > 0) {
              this.guardForm.icId = resultdata.CardNo
              this.$message.success('读取成功')
            } else {
              this.$message.success('读取失败，请先放置IC卡')
            }
            break
        }
      })
    },
    beforeClose(done) {
      var FormatID = '0'
      var OrderID = '0'
      this.rfidreader.Repeat = 0
      //this.rfidreader.RequestTypeACardNo(FormatID, OrderID)
      done()
    },
    currentChange(val) {
      this.guardPage.page = val
      this.getIcList()
    },
    refreshChange(val) {
      this.getIcList()
      this.$message({
        showClose: true,
        message: '刷新成功',
        type: 'success'
      })
    },
    getIcList() {
      this.guardLoading = true
      fetchIcList(this.guardId, {
        page: this.guardPage.currentPage,
        limit: this.guardPage.pageSize,
        type: 0
      }).then(response => {
        this.guardLoading = false
        this.guardData = response.data.data.records
        this.guardPage.total = response.data.data.total
        this.code = response.data.code
      })
    }
  }
}
</script>

<style>
</style>
